<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>船舶名称{{ detail ? detail.shipName : '--' }}</h1>
          <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
          <el-tag v-if="detail.authStatus === 0" type="info"> {{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 1" type="success">{{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 2" type="warning">{{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 3" type="danger"> {{ detail.authStatusStr }}</el-tag>
        </div>
        <div class="company-title-box__credit">AIS编码：{{ detail ? detail.aisCode : '--' }}</div>
      </div>
      <div class="company-title-box-btn">
        <el-button v-if="detail.authStatus === 0" size="mini" @click="handleAuth(detail.id)">
          发起认证
        </el-button>
        <el-button v-if="detail.authStatus === 3" size="mini" @click="updateShip(detail.id)">
          编辑船舶
        </el-button>
        <el-button
          v-if="detail.authStatus === 3"
          size="mini"
          @click="showUpdateCompanyDialog(detail)"
        >
          调整归属企业
        </el-button>
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions :column="1" title="| 基础信息" :label-style="{ marginLeft: '40px' }">
        <el-descriptions-item
          v-for="(item, index) in baseDescriptionItems"
          :key="index"
          :label="item.label"
        >
          {{ item.value }}
        </el-descriptions-item>

        <el-descriptions-item label="船舶照片">
          <el-image
            v-for="(item, index) in detail.shipPicList"
            :key="index"
            :src="item"
            fit="contain"
            style="width: 100px; height: 100px; margin-right: 10px"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        :column="4"
        title="| 证件照片"
        :colon="false"
        :label-style="{ marginLeft: '30px' }"
      >
        <el-descriptions-item>
          <el-descriptions :column="1">
            <el-descriptions-item label="AIS标识码证">
              <el-image
                :src="detail.aisFile"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="AIS编码">
              {{ detail ? detail.aisCode : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="MMIS码">
              {{ detail ? detail.mmsiCode : '' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-descriptions :column="1">
            <el-descriptions-item label="船舶国籍证">
              <el-image
                :src="detail.nationFile"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              ></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-descriptions :column="1">
            <el-descriptions-item label="船舶营业运输证(主页)">
              <el-image
                :src="detail.operatingFile"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              >
                <div slot="error">
                  <span>-</span>
                </div>
              </el-image>
            </el-descriptions-item>
            <el-descriptions-item label="船舶营业运输证(副页)">
              <el-image
                :src="detail.operatingFileSubpage"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              >
                <div slot="error">
                  <span>-</span>
                </div>
              </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-descriptions :column="1">
            <el-descriptions-item label="船舶安全与环保证(主页)">
              <el-image
                :src="detail.safeFile"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              >
                <div slot="error">
                  <span>-</span>
                </div>
              </el-image>
            </el-descriptions-item>
            <el-descriptions-item label="船舶安全与环保证(副页)">
              <el-image
                :src="detail.safeFileSubpage"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              >
                <div slot="error">
                  <span>-</span>
                </div>
              </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-descriptions :column="1">
            <el-descriptions-item label="船舶适航证">
              <el-image
                :src="detail.seaworthinessFile"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              >
                <div slot="error">
                  <span>-</span>
                </div>
              </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-descriptions :column="1">
            <el-descriptions-item label="船舶吨位证">
              <el-image
                :src="detail.tonnageFile"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              >
                <div slot="error">
                  <span>-</span>
                </div>
              </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-descriptions :column="1">
            <el-descriptions-item label="船舶检验证">
              <el-image
                :src="detail.inspectionFile"
                fit="contain"
                style="width: 100px; height: 100px; margin-right: 10px"
              >
                <div slot="error">
                  <span>-</span>
                </div>
              </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--  调整归属企业弹窗  -->
    <update-company-dialog
      :initial-selected-ship="selectedShip"
      :initial-selected-ships="selectedShips"
      :company-list="companyList"
      :is-visible.sync="isUpdateCompanyDialogVisible"
      @updateCompanyCallBack="handleUpdateCompanyCallBack"
    ></update-company-dialog>
  </div>
</template>

<script>
import { getShipDetail } from '@/api/ship';
import UpdateCompanyDialog from '@/views/platform/ship/list/components/UpdateCompanyDialog.vue';
import { getCompanyList } from '@/api/common';

export default {
  components: { UpdateCompanyDialog },
  data() {
    return {
      companyList: [],
      isShowUpdateCompanyDialog: false,
      selectedShip: {},
      selectedShips: [],
      isUpdateCompanyDialogVisible: false,
      detail: {
        id: null, // id
        companyId: null, // 所属企业id
        shipName: '', // 船舶名称
        shipType: null, // 船舶类型
        shipTonLevel: 0, // 载货吨位
        shipLength: 0, // 船舶长
        shipWidth: 0, // 船舶宽
        shipDepth: 0, // 船舶高
        buildDate: '', // 建造日期
        shipPic: '', // 船舶照片
        aisFile: '', // AIS标识码证
        nationFile: '', // 船舶国籍证
        operatingFile: '', // 船舶营业运输证(主页)
        operatingFileSubpage: '', //船舶营业运输证(副页)
        safeFile: '', // 船舶安全证书(主页)
        safeFileSubpage: '', // 船舶安全证书(副页)
        aisCode: '', // AIS编码
        mmsiCode: '', // MMIS码
        createType: 1, // 创建类型
        seaworthinessFile: '', // 船舶适航证
        tonnageFile: '', // 船舶吨位证
        inspectionFile: '', // 船舶检验证
      },
    };
  },
  computed: {
    baseDescriptionItems() {
      return [
        { label: '船舶名称', value: this.detail ? this.detail.shipName : '' },
        { label: '归属企业', value: this.detail ? this.detail.companyName : '' },
        { label: '船舶类型', value: this.detail ? this.detail.shipTypeStr : '' },
        { label: '载货吨位', value: this.detail ? this.detail.shipTonLevel : '' },
        {
          label: '船舶尺寸',
          value: `长${this.detail ? this.detail.shipLength : ''}m*宽${this.detail ? this.detail.shipWidth : ''}m*高${this.detail ? this.detail.shipDepth : ''}m`,
        },
        { label: '建造日期', value: this.detail ? this.detail.buildDate : '' },
      ];
    },
  },
  mounted() {
    this.getShipDetail();
    this.getCompanyList();
  },
  methods: {
    // 获取船舶详情
    getShipDetail() {
      getShipDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
      });
    },
    /**
     * 编辑
     * @param id
     */
    updateShip(id) {
      this.$router.push({ name: 'SaveShip', query: { id: id } });
    },
    /**
     * 获取归属企业下拉列表
     */
    getCompanyList() {
      getCompanyList().then((res) => {
        this.companyList = res.data;
      });
    },
    /**
     * 调整归属企业弹窗
     * @param ship
     */
    showUpdateCompanyDialog(ship) {
      if (this.selectedShips.length === 0) {
        this.selectedShip = ship;
      }
      this.isUpdateCompanyDialogVisible = true;
    },
    /**
     * 调整归属企业弹窗回调
     */
    handleUpdateCompanyCallBack() {
      this.isUpdateCompanyDialogVisible = false;
      // 更新完成后的回调，比如刷新船舶列表等
      this.selectedShip = null;
      this.selectedShips = [];
      this.getShipDetail();
    },
    handleAuth() {
      alert('发起认证，功能未实现');
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
